import type { TFunction } from "i18next";
import { ThemeToggle } from "@/app/[lng]/components/Header/ThemeToggle";
import { LanguageSwitcher } from "@/app/[lng]/components/Header/LanguageSwitcher";

export interface HeaderBaseProps {
  t: TFunction;
  lng: string;
}

export const HeaderBase = ({ t, lng }: HeaderBaseProps) => {
  return (
    <header className="sticky top-0 z-50 bg-white/80 backdrop-blur-xl border-b border-gray-100/50 dark:bg-gray-950/80 dark:border-gray-800/50 shadow-sm">
      <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
        {/* Left: Logo and Title */}
        <div className="flex items-center gap-3">
          <a href={`/${lng}`} className="flex items-center gap-3">
            <span className="text-3xl">📷</span>
            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-2xl font-bold text-transparent">
              {t("site_name")}
            </span>
          </a>
        </div>

        {/* Right: Theme, Language, Auth */}
        <div className="flex items-center gap-3">
          {/* Theme Toggle */}
          <ThemeToggle />

          {/* Language Switcher */}
          <LanguageSwitcher />

          {/* Login Link */}
          <a
            href={`/${lng}/login`}
            className="hidden sm:block text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 transition-colors px-3 py-2"
          >
            {t("nav.login")}
          </a>

          {/* Register Button */}
          <a
            href={`/${lng}/register`}
            className="rounded-xl bg-gradient-to-r from-blue-600 to-purple-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-blue-500/25 transition-all hover:shadow-xl hover:shadow-blue-500/40 hover:scale-105"
          >
            {t("nav.register")}
          </a>

          {/* Mobile Menu Button */}
          <button className="lg:hidden rounded-xl p-2 text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800 transition-colors">
            <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
            </svg>
          </button>
        </div>
      </div>
    </header>
  );
};
